<script setup>
import datePickers from "@/components/datePickers.vue"
import selectsCom from "@/components/selectsCom.vue"
import cascaderSelect from "@/components/cascaderSelect.vue"
import descriptionsCom from "@/components/descriptionsCom.vue"
import virtualizedSelect from "@/components/virtualizedSelect.vue"
import { companyData, projectData, siteData, subSystemOptions } from '@/utils/selectOptionsData'
import { useSelectOptionsStore } from '@/store'
import { useOptions } from '@/composable/useOptions'
import { useFormateDate } from '@/composable/useFormateDate'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

// 表单 
const form = ref({
  monthDate: '2024-01',
  pageNum: 1,
  pageSize: 10,
})
// 搜索
const searchData = () => {
  console.log('form', form.value)
}
// 重置
const resetForm = () => {
  form.value = {
    pageNum: 1,
    pageSize: 10,
  }
  console.log('resetForm', form.value)
}

// 解构store会使其失去响应式，需要使用storeToRefs使其保持响应式
const selectOptions = useSelectOptionsStore()
// 设置下拉框初始值
selectOptions.setCompanyOptions(companyData)
selectOptions.setAllProjectOptions(projectData)
selectOptions.setAllSiteOptions(siteData)
const { companyOptions } = storeToRefs(selectOptions)

// 公司下拉
const companyOptionsProps = {
  label: 'companyName',
  value: 'companyNo',
}
// 项目下拉
const projectOptions = ref([])
const projectOptionsProps = {
  label: 'projectName',
  value: 'projectNo',
}
// 厂(站)下拉
const siteOptions = ref([])
const siteOptionsProps = {
  label: 'siteName',
  value: 'siteNo',
}
const { getProjects, getSite } = useOptions()
// 选择公司
const selectCompany = (companyNo) => {
  if (form.value.projectNo) form.value.projectNo = ''
  if (form.value.siteNo) form.value.siteNo = ''
  projectOptions.value = getProjects(companyNo)
  siteOptions.value = []
}
// 选择项目
const selectProject = (projectNo) => {
  if (form.value.siteNo) form.value.siteNo = ''
  siteOptions.value = getSite(form.value.companyNo, projectNo)
}

// 子系统props
const cascaderProps = { multiple: true, emitPath: false, label: 'quickEntryName', value: 'quickEntryId' }

// 查看详情
const detailDialog = ref(false)
const { handleFormatDate } = useFormateDate()
const descriptionsData = {
  year: '2021',
  monthDate: '2021-01',
  dayDate: '2021-01-01',
  companyName: '公司001',
  projectName: '项目001',
  siteName: '厂(站)001',
  createTime: 1706846567110,
}
const descriptionsProp = [
  { label: '年份', value: 'year' },
  { label: '月份', value: 'monthDate' },
  { label: '日期', value: 'dayDate' },
  { label: '公司', value: 'companyName' },
  { label: '项目', value: 'projectName' },
  { label: '厂(站)', value: 'siteName' },
  { label: '创建时间', value: 'createTime', formater: (val) => handleFormatDate(val, 'yyyy-MM-dd hh:mm:ss') }
]

const labelStyle = {
  display: 'inline-block',
  width: '70px',
  textAlign: 'right'
}

// 虚拟选择器
const virtualizedOptions = Array.from({ length: 10000 }, (_, index) => {
  return {
    label: `数字${index}`,
    value: `${index}`,
  }
})
const num = ref('')
const selectNum = (data) => {
  data !== undefined && console.log('您选择的数字是：' + data)
}
</script>

<template>
  <div class="search">
    <el-form :inline="true" label-width="40px">
      <el-form-item label="年份" label-width="60px">
        <datePickers placeholder="请选择年份" v-model="form.year" valueFormat="YYYY" />
      </el-form-item>
      <el-form-item label="月份">
        <datePickers placeholder="请选择月份" v-model="form.monthDate" valueFormat="YYYY-MM" />
      </el-form-item>
      <el-form-item label="日期">
        <datePickers placeholder="请选择日期" v-model="form.dayDate" :showPickerOptions="true" :setDefaultValue="true" />
      </el-form-item>
      <el-form-item label="公司">
        <selectsCom placeholder="请选择公司" v-model="form.companyNo" :options="companyOptions"
          :selectProps="companyOptionsProps" @change="selectCompany" />
      </el-form-item>
      <el-form-item label="项目">
        <selectsCom placeholder="请选择项目" v-model="form.projectNo" :options="projectOptions"
          :selectProps="projectOptionsProps" @change="selectProject" />
      </el-form-item>
      <el-form-item label="厂(站)" label-width="50px">
        <selectsCom placeholder="请选择厂(站)" v-model="form.siteNo" :options="siteOptions"
          :selectProps="siteOptionsProps" />
      </el-form-item>
      <el-form-item label="子系统" label-width="66px">
        <cascaderSelect placeholder="请选择子系统" v-model="form.innerSystem" :cascaderOptions="subSystemOptions"
          :cascaderProps="cascaderProps" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData()">搜索</el-button>
        <el-button plain @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="details">
    <el-button type="primary" @click="detailDialog = true">查看详情</el-button>
  </div>
  <div class="virtualized-select-box">
    <span class="virtualized-select-box-tip">虚拟化选择器</span>
    <virtualized-select placeholder="请选择 0 ~ 10000 的数字" v-model="num" :options="virtualizedOptions"
      @change="selectNum" />
  </div>
  <el-dialog v-model="detailDialog" title="查看详情" width="800">
    <descriptions-com :descriptionsData="descriptionsData" :descriptionsProp="descriptionsProp"
      :labelStyle=labelStyle />
  </el-dialog>
</template>

<style scoped lang="scss">
.virtualized-select-box {
  margin-top: 10px;

  .virtualized-select-box-tip {
    margin-right: 20px;
  }
}
</style>
